<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>数据可视化-ECharts</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<span class='showAuthor'>作者：@键盘上的舞者</span>
			<h1>数据可视化-ECharts</h1>
			<span class='showTime'></span>
		</header>
		<!-- 主体部分 -->
		<section class='mainBox'>
			<!-- 左边部分 -->
			<div class='column'>
				<div class='panel'>
					<h2>柱状图-就业行业 2019-2020</h2>
					<div class='charts left1'></div>
					<div class='panel_footer'></div>
				</div>
				<div class='panel'>
					<h2 class='left2_title'>
						折线图-人员变化
						<a href='javascript:;'>2019</a>
						<a href='javascript:;'>2020</a>
					</h2>
					<div class='charts left2'></div>
					<div class='panel_footer'></div>
				</div>
				<div class='panel'>
					<h2>饼形图-年龄分布</h2>
					<div class='charts left3'></div>
					<div class='panel_footer'></div>
				</div>
			</div>
			<!-- 中间部分 -->
			<div class='column'>
				<div class='num'>
					<div class='num_hd'>
						<div>67890</div>
						<div>12345</div>
					</div>
					<div class='num_bd'>
						<div>前端需求人数</div>
						<div>市场供应人数</div>
					</div>
				</div>
				<div class='map'>
					<div class='map1'></div>
					<div class='map2'></div>
					<div class='map3'></div>
					<div class='chart'></div>
				</div>
			</div>
			<!-- 右边部分 -->
			<div class='column'>
				<div class='panel'>
					<h2>柱状图-就业行业</h2>
					<div class='charts right1'></div>
					<div class='panel_footer'></div>
				</div>
				<div class='panel'>
					<h2>折线图-播放量</h2>
					<div class='charts right2'></div>
					<div class='panel_footer'></div>
				</div>
				<div class='panel'>
					<h2>饼形图-地区分布</h2>
					<div class='charts right3'></div>
					<div class='panel_footer'></div>
				</div>
			</div>
		</section>
		<!-- 适配方案 -->
		<script src='js/flexible.js'></script>
		<!-- 获取时间 -->
		<script src='js/showTime.js'></script>
		<!-- 引入ECharts -->
		<script src='https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js'></script>
		<!-- 引入china.js -->
		<script src='js/china.js'></script>
		<script src='js/index.js'></script>
	</body>
</html>
